<template>
  <div class="action-container">
    <h2 class="title">W's Markdown Editor</h2>

    <div class="actions">
      <h3 class="title">开始使用</h3>

      <div class="action action-btn" @click="$emit('addFile')">
        <el-icon :size="20">
          <document-add />
        </el-icon>
        <span>新建文档</span>
      </div>

      <div class="action action-btn" @click="openFile">
        <el-icon :size="20">
          <folder-opened />
        </el-icon>
      <span>打开文档</span>
      </div>
    </div>

    <div class="recent">
      <h3 class="title">最近的文档</h3>
      <div class="recent-list" v-if="$store.getters.history.length > 0">
        <div class="recent-item" v-for="(file, index) in $store.getters.history" :key="index">
          <a class="action-btn" @click="openRecentFile(file)">{{ file.name }}</a>
          <el-icon :size="14" style="margin-left: 10px; transform: translateY(1px); cursor: pointer;" @click="removeHistoryFile(file)">
            <delete />
          </el-icon>
          <p>{{ file.path }}</p>
        </div>
      </div>
      <span v-else>一片空白~</span>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import renderer from '@/utils/renderer.js'

defineEmits('addFile')

const openFile = () => {
  renderer.openFileMenu()
}

const openRecentFile = file => {
  renderer.openFileByPath(file.path)
}

const store = useStore()
const removeHistoryFile = file => {
  store.commit('removeHistoryFile', JSON.parse(JSON.stringify(file)))
}
</script>

<style lang="less" scoped>
.action-container {
  width: 50vw;
  margin: 0 auto;
  padding: 60px 0;
  color: #999;

  .title {
    margin-bottom: 15px;
    color: #666;
  }

  .action-btn {
    color: #777;
    cursor: pointer;

    &:hover {
      color: #409eff;
    }
  }
}

.actions {
  margin: 60px 0;
  user-select: none;

  .action {
    display: flex;
    align-items: center;
    max-width: fit-content;
    margin-bottom: 5px;
    cursor: pointer;

    span {
      margin-left: 5px;
    }
  }
}

.recent-list {
  max-height: 50vh;
  padding: 15px;
  background: #f9fafa;
  overflow-y: auto;

  .recent-item {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    p {
      font-size: 12px;
    }
  }
}
</style>
